<!-- 1. 逻辑代码 写函数 定义数据-->

<script setup lang="ts">
import { ref } from 'vue'

const imgurl = ref(
  'https://img1.baidu.com/it/u=1486306251,293684648&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1344',
)
console.log('地址', imgurl.value)

const changeUrl = () => {
  imgurl.value =
    'https://img0.baidu.com/it/u=802916407,586437352&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
}
const isBlue = ref(false)
const isOrange = ref(false)
const changeColor = () => {
  isBlue.value = !isBlue.value
  isOrange.value = !isOrange.value
}
</script>
<!-- 2. 结构 -->
<template>
  <!-- v-bind 基本用法 v-bind:属性名 简写是 :属性名 -->
  <img class="image" @click="changeUrl" :src="imgurl" alt="" />
  <!-- :class = {类名， 是否生效的表达式} -->
  <div class="box" :class="{ skyBlue: isBlue, orange: isOrange }" @click="changeColor"></div>
</template>
<!-- 3. 样式 -->
<style scoped>
.image {
  width: 100px;
  height: 100px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px black solid;
}
.skyBlue {
  background-color: skyblue;
}
.orange {
  border: 2px orange solid;
}
</style>
